<template>
    <div class="box" :style="{ marginTop: tabbarHeight + 'px' }">
        <div class="bg"></div>
        <van-list v-model="loading" :finished="finished" finished-text="— THE END —" @load="getSystemData" class="glance"
            :style="{ height: windowHeight - navbarHeight - tabbarHeight + 'px' }">

            <div class="xtxx-class">
                <div class="xtxx-list-class" v-for="(item, index) in list" :key="index">
                    <div>
                        <span>{{ item.time }}</span>
                    </div>
                    <div>
                        <div v-show="isxzsn">
                            <div>新人指南</div>
                            <div>
                                <span>查看详情</span>
                                <van-icon name="arrow" />
                            </div>
                        </div>
                        <div>
                            <span>{{ item.msg }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </van-list>
        <div class="botton-class">
            <div @click="contactcustomerservice">
                <!-- \border-image: linear-gradient(180deg, rgba(55, 100, 236, 1), rgba(107, 133, 247, 1)) 1 1; -->
                <span>联系客服</span>
            </div>
        </div>
    </div>
</template>
  
<script>
import { formatTime } from '@/utils/fun'
//导入vux
import { mapGetters, mapMutations, mapActions } from "vuex";

export default {
    data() {
        return {
            loading: true,
            finished: false,
            searchParameter: {
                page: 1,
                limit: 10,
            },
            list: [

            ],
            windowHeight: '',
            tabbarHeight: '',
            navbarHeight: '',
            options: {
                // 对方的用户 ID 或者群组 ID 或聊天室 ID。
                targetId: 'system_message_user',
                // 每页期望获取的消息条数。取值范围为 [1,50]，默认值为 20。
                pageSize: 20,
                // 查询的起始消息 ID。若该参数设置为 `-1`、`null` 或空字符串，从最新消息开始。
                cursor: -1,
                // 会话类型：（默认） `singleChat`：单聊；`groupChat`：群聊。
                chatType: "singleChat",
                // 消息搜索方向：（默认）`up`：按服务器收到消息的时间的逆序获取；`down`：按服务器收到消息的时间的正序获取。
                searchDirection: "down",
            },
            isxzsn: false,
        };
    },
    mounted() {
        this.windowHeight = document.documentElement.clientHeight
        this.navbarHeight = document.getElementById('navbar').clientHeight
        this.tabbarHeight = document.getElementById('tabbar').clientHeight
        this.getSystemData();
    },
    computed: {
    ...mapGetters("list", [
      "infoObj",
    ]),
  },
    methods: {
        // 获取指定用户id的会话列表
        getSystemData() {
            console.log("触发");
            WebIM.conn.getHistoryMessages(this.options).then((res) => {
                // 成功获取历史消息。
                console.log(res);
                res.messages.forEach(element => {
                    element.time = formatTime(element.time)
                });
                this.list = this.list.concat(res.messages)
                if (!res.isLast) {
                    this.options.cursor++;
                } else {
                    this.finished = true;
                }
                this.loading = false;
            })
        },
        //联系客户
        async contactcustomerservice(){
            let obj = {
                u: WebIM.conn.user,
                t: WebIM.conn.token,
                nick:''
            }
            console.log(obj);
            let users =  WebIM.conn.user + '';
            await  WebIM.conn.fetchUserInfoById(users).then(ress => {
                obj.nick = ress.data[users].nickname;
                window.location.href=`https://www.seyou1.vip/h5/service?u=${obj.u}&t=${obj.t}&nick=${obj.nick}`
            })
        }
    },
};
</script>
  
<style scoped lang="scss">
.bg {
    width: 100%;
    height: 88px;
    position: absolute;
    top: 0;
    background: linear-gradient(180deg, #CDE1FD 0%, rgba(255, 255, 255, 0) 100%);
}

.glance {
    position: relative;
    padding: 0px 16px;
}

::v-deep .van-list {
  overflow-y: auto !important;
}

.botton-class {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);

    &>div {
        width: 96px;
        height: 32px;
        border-radius: 8px;

        border: 1px solid #3764EC;

        background: linear-gradient(180deg, #3764EC 0%, #6B85F7 100%);

        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #000000;

        text-align: center;
        line-height: 32px;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

}

.xtxx-class {
    &>div:nth-child(1) {
        padding-top: 10px;
    }
}

.xtxx-list-class {
    padding-top: 40px;

    &>div:nth-child(1) {
        margin-bottom: 20px;
        text-align: center;
    }

    &>div:nth-child(2) {
        // height: 144px;
        background: #F5F5F5;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        padding: 15px;

        &>div:nth-child(1) {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;

            &>div:nth-child(1) {
                font-size: 16px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                color: #1A1A1A;
            }

            &>div:nth-child(2) {
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #1A1A1A;
            }
        }

        &>div:nth-child(2) {
            flex: 1;
            font-size: 14px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #767676;
        }
    }
}
</style>
  